<template>
  <view class="max_box">
    <text class="Title">收入认证</text>
    <view class="box">
      <text class="logo">未认证</text>
    </view>

    <view class="images">
      <image src="@/static/My/salaryConfirm.png" mode="scaleToFill" class="image" />
      <view class="popup_text">
        <text>点击拍照上传本人最近1年收入证明或流水</text>
        <text class="`iconfont icon-zhaoxiangji"></text>
      </view>
      <button class="submitBtn">提交认证</button>
      <view class="separator">
        <text class="line"></text>
        <text class="popup_title">温馨提醒</text>
        <text class="line"></text>
      </view>
      <ul class="popup_ul">
        <li class="popup_li">
          <text class="dot">·</text>
          <text>请拍照上传清晰的本人最近1年收入证明或流水， 如上图示例</text>
        </li>
        <li class="popup_li">
          <text class="dot">·</text>
          <text>收入认证成功后， 点亮购车认证图标</text>
        </li>
        <li class="popup_li">
          <text class="dot">·</text>
          <text
            >您上传的任何身份证图片等资料， 仅供审核使用且TA人无法看到， 此外，
            我们会对图片进行安全处理， 敬请放心</text
          >
        </li>
      </ul>
    </view>
  </view>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.image {
  width: 100%;
  height: 25rem !important;
}

@media screen and (max-width: 700px) {
  .image {
    height: 12rem !important;
  }
}

.max_box {
  padding-bottom: 1rem;
  box-sizing: border-box;
}

.popup_ul {
  color: #a7a6a6;

  .popup_li {
    margin: 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
  }

  .dot {
    font-size: 2.5rem;
    margin-right: 0.5rem;
  }
}

.separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.line {
  flex: 1;
  height: 1px;
  background-color: #ccc;
}

.popup_title {
  font-size: 28rpx;
  color: #999;
}

.popup_text {
  font-size: 0.9rem;
  color: #ccc;
  margin: 0.6rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-zhaoxiangji {
  margin-left: 5rpx;
}

.images {
  width: 80%;
  margin: 8% auto;
}

.submitBtn {
  margin: 12% auto;
  background-image: linear-gradient(to right, #6fc7d5, #28abc1);
  border-radius: 1.5em;
  color: white;
}

.flex {
  display: flex;
}

.message {
  margin-bottom: 48rpx;
}

.Title {
  font-size: 48rpx;
  font-weight: 500;
  margin: 20% 0 0.5rem;
  text-align: center;
  display: block;
}

.box {
  text-align: center;

  .logo {
    background: #ccc;
    border: none;
    border-radius: 1.2em 0em 1.2em 1.2em;
    color: white;
    padding: 4rpx 20rpx;
    box-sizing: border-box;
    display: inline-block;
    font-size: 28rpx;
  }
}
</style>
